<template>
    <div class="design-item">
        <div class="design-item-controller">
            <div class="design-item-controller-handle">
                <div class="design-component-seckill">
                    <div class="cap-ump-seckill">
                        <!-- 主体-->
                            <div class="cap-ump-seckill-header">

                                    <div class="seckill-header-title">{{title}}</div>
                                    <div class="count-down-wrap">
                                        <span class="count-down-circle">
                                            00
                                        </span>
                                        <span class="count-down-colon">:</span>
                                        <span class="count-down-circle">
                                            00
                                        </span>
                                        <span class="count-down-colon">:</span>
                                        <span class="count-down-circle">
                                            00
                                        </span>
                                    </div>

                            </div>
                            <div class="cap-ump-seckill-content">
                                <ul class="cap-ump-seckill-goods-list">
                                    <li class="cap-ump-seckill-goods-item" v-for="item in goodsList " >
                                        <div class="goods-item-img-wrap">
                                            <img :src="item.goodsImageUrl" >
                                        </div>
                                        <div class="goods-item-name">{{item.goodsName}}</div>
                                        <div class="goods-item-price">
                                            <div class="goods-item-current-price">
                                                ￥2000
                                            </div>
                                            <div class="goods-item-origin-price">
                                                ￥2000
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="cap-ump-seckill-footer">
                                查看全部
                            </div>
                        <!-- end 主体 -->
                    </div>
                </div>
            </div>
            <slot name="menu"></slot>
        </div>
        <div class="design-item-editor" v-show="show && !showAddMenuGroup">
            <div>
                <div class="design-item-editor-title">秒杀</div>

                <div style="margin-bottom:20px">
                    <div class="editor-group" style="margin-bottom:0">
                        <div class="editor-group-label"><em class="group-required-star">*</em>标题：</div>
                        <div class="editor-group-control">
                            <div class="input-wrap"><input v-model.trim="title" placeholder="请填写标题文字"></div>
                        </div>
                    </div>
                    <div class="design-editor-control-group-error" style="margin-left: 70px;margin-top: 5px" v-show="showError">请填写标题</div>
                </div>

            </div>
        </div>
        <slot name="addMenuGroup" v-if="showAddMenuGroup"></slot>
    </div>
</template>
<script>
    var emptyList = [0, 1, 2].map(function (index) {
        return {
            goodsName: '此处显示商品名',
            goodsImageUrl: 'http://file.quanclubs.com/image/1c/45/1c45b9e3536f55ded545579658f00fd0.jpg'
        }
    })

    var defaultDataFormat = {
        // 标题文字
        title : '限时购' ,
        type: 'seckill'
    }
    export default {
        name: "nc-design-item-seckill",
        otherInfo: {
            title: '秒杀',
            type: 'seckill',
            group: 1,
            max: 0
        },
        //外部传入参数
        props: {
            show: {
                type: Boolean,
                default: false
            },
            options: {
                type: Object,
                default: null
            },
            cid: {
                type: Number
            },
            showAddMenuGroup: {
                type: Boolean,
                default: false
            }
        },
        /*
         * 自身数据,一定要一个function
         */
        data() {

            let data = {}, key, customData = {
                ncGlobal: ncGlobal,
                showError: false ,
                goodsList : emptyList
            }

            if (!Nc.isEmpty(this.options)) {
                for (key in this.options) {
                    data[key] = this.options[key]
                }
            } else {
                data = $.extend(true, {}, defaultDataFormat)
            }

            return $.extend({}, data, customData)
        },
        computed: {
        },
        methods: {
            /**
             * 获取当前数据
             */
            getCurrentData () {

                if (null == this.title) {
                    this.showError = true
                    return null
                }


                var result = {}, key

                for (key in defaultDataFormat) {
                    result[key] = this[key]
                }

                return result
            },
            getImgStyle (item){
                return {
                    backgroundImage: 'url(' + item.goodsImageUrl + ')',
                    paddingTop: '66.6667%',
                    marginTop: '-66.6667%'
                }
            }
        }
    };
</script>